import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

// 定义CartItem组件，它接收商品的id、名称、价格、数量以及增加和移除商品的回调函数作为props
const CartItem = ({ id, name, price, quantity, onAdd, onRemove }) => {
  return (
    // 使用View作为容器组件，设置样式以实现布局和视觉效果
    <View style={styles.item}>
      {/* 显示商品名称，使用加粗样式 */}
      <Text style={styles.name}>{name}</Text>
      {/* 显示商品的总价，使用字符串模板来插入价格值 */}
      <Text>总价: ￥{price}</Text>
      {/* 显示商品的数量 */}
      <Text>数量: {quantity}</Text>
      {/* 按钮容器，包含增加、减少数量和可选的移除商品按钮 */}
      <View style={styles.buttonsContainer}>
        {/* 增加数量按钮，点击时触发onAdd回调函数 */}
        <Button title="+" onPress={onAdd} />
        {/* 减少数量按钮，点击时触发onRemove回调函数 */}
        <Button title="-" onPress={onRemove} />
        {/* 当数量大于1时显示移除商品按钮，点击时触发onRemove回调函数 */}
        {quantity > 1 && <Button title="移除" onPress={onRemove} />}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    marginVertical: 5,
    backgroundColor: '#f9f9f9',
    borderRadius: 5,
  },
  name: {
    fontWeight: 'bold',
  },
  buttonsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

export default CartItem;
